<template>
  <div>
    <el-dialog :visible="showdialog" title="查看凭证" @close="closeDialog">
      <div class="imgBox">
        <img :src="imgUrl" alt="">
      </div>
      <div class="bottomBtn">
        <el-button @click="$emit('update:showdialog', false)">关闭</el-button>
        <!-- <el-button type="primary" @click="submit">确定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryVoucher } from '@/api/financial'
import { getLoanedVoucher } from '@/api/platformCommission'

export default {
  // name: 'Dialog',
  // inject: ['reload'],
  props: {
    showdialog: {
      type: Boolean,
      required: true
    },
    voucherData: {
      type: Object,
      required: true
    },
    voucherIndex: {
      type: Number,
      required: true
    },
    model: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      imgUrl: ''
    }
  },
  watch: {
    'voucherIndex'(val) {
      this.cheackVoucher()
    }
  },
  mounted() {

  },
  methods: {
    cheackVoucher() {
      if (this.model === 'casher') {
        queryVoucher(this.voucherData).then(res => {
          if (res.code === '200') {
            console.log(res)
            this.imgUrl = res.data
          }
        })
      }
      if (this.model === 'platform') {
        getLoanedVoucher(this.voucherData).then(res => {
          if (res.code === '200') {
            console.log(res)
            this.imgUrl = res.data
          }
        })
      }
    },
    closeDialog() {
      this.$emit('update:showdialog', false)
      this.$emit('update:voucherIndex', -1)
    }
  }
}
</script>

<style scoped>
    .imgBox{
        width: 60%;
        min-height: 300px;

        margin: 10px auto;
    }
    .imgBox img{
        width:100%;
    }
    .bottomBtn{
    padding-top: 20px;
    width:100%;
    height: 80px;
    text-align: center;
    border-top: 1px solid #ddd
}
.bottomBtn button{
    display: inline-block;
}
</style>
